<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="header">
			<view class="in">
				<view class="info">
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view class="num">
						工号：{{userInfo.username}}
					</view>
					<view class="num">
						部门：{{userInfo.department_name}}
					</view>
				</view>
				<view class="avatar">
					<image src="@/static/img/ceshi.jpg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="con">
			<u-tabs :list="list1" @click="click"></u-tabs>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="two">
						<!-- <view class="img">
							<image src="@/static/img/ceshi.jpg" mode=""></image>
						</view> -->
						<view class="info msg">
							<view class="tit">{{item.product_name}}</view>
							<view class="sku">{{item.parameters}}</view>
						</view>
						<view class="info right">
							<view class="price">￥{{item.price}}</view>
							<view class="num">X{{item.num}}</view>
						</view>
					</view>
					<view class="the">
						<view class="time">订单时间：{{item.pay_time_text}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		innerinfo,
		Productorder
	} from '@/api/inner.js'
	export default{
		data(){
			return{
				list1:[
					{
						name: '盈利订单',
						type:1
					},
					{
						name: '亏损订单',
						type:1
					}
				],
				userInfo:{},
				list:[],
				type:1,
				watermark:'',
			}
		},
		onLoad() {
			this.watermark = uni.getStorageSync('watermark')
			this.getList()
			this.getInfo()
		},
		methods:{
			click(e){
				console.log(e)
				this.type = e.type
				this.getList()
			},
			async getList(){
				let res = await Productorder({
					page_size:15,
					type:this.type
				})
				this.list = res.data.list.data
			},
			async getInfo(){
				let res = await innerinfo()
				this.userInfo = res.data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: calc(100vh - 44px);
		background-image: url('@/static/img/infoBg1.png');
		background-repeat: no-repeat;
		background-position: 0 -44px;
		background-size: 100% 270px;
		.header{
			padding: 45px 10px 0;
			margin-bottom: 10px;
			.in{
				width: 100%;
				height: 200px;
				background-image: url('@/static/img/infoBg2.png');
				background-repeat: no-repeat;
				background-position: top left;
				background-size: 100% 200px;
				padding: 50px 34px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.info{
					.name{
						color: #3D3D3D;
						font-size: 18px;
						margin-bottom: 7px;
					}
					.num{
						font-size: 14px;
						color: #666666;
						margin-bottom: 3px;
					}
				}
				.avatar{
					image{
						width: 43px;
						height: 43px;
						border-radius: 100px;
					}
				}
			}
		}
		.con{
			padding: 0 15px;
			/deep/.u-tabs__wrapper__nav__item__text{
				font-size: 16px;
				color: #232323;
			}
			/deep/.u-tabs__wrapper__nav__line{
				background-color: #232323 !important;
			}
			/deep/.u-tabs{
				margin-bottom: 15px;
			}
			.list {
				padding-bottom: 15px;
				.item {
					background-color: #fff;
					border-radius: 10px;
					padding: 10px 15px;
					border-bottom: 1px solid #e2e2e2;
					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 7px;
						border-bottom: 1px solid #e2e2e2;
						margin-bottom: 7px;
						.info {
							display: flex;
							align-items: center;
							font-size: 14px;
							color: #3d3d3d;
							image {
								width: 28px;
								height: 28px;
								border-radius: 100px;
								margin-right: 10px;
							}
						}
						.post {
							font-size: 12px;
							color: #999999;
						}
					}
					.one {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10px;
						.msg {
							font-size: 11px;
							color: #666666;
						}
						.tag {
							font-size: 14px;
							color: #3aa2ff;
						}
					}
					.two {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.img {
							image {
								width: 80px;
								height: 70px;
								border-radius: 5px;
							}
						}
						.msg {
							margin: 0 10px 0 5px;
						}
						.right {
							align-items: end;
							font-size: 13px;
							color: #666666;
						}
						.info {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							height: 70px;
							font-size: 14px;
							.tit {
								color: #232323;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}
							.sku {
								color: #666666;
							}
						}
					}
					.the {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10px;
						.time {
							font-size: 12px;
							color: #999999;
						}
						.btn {
							font-size: 14px;
							width: 80px;
							padding: 5px 0;
							text-align: center;
							border-radius: 1000px;
						}
						.on {
							color: #fff;
							background-color: #3aa2ff;
						}
					}
				}
			}
		}
	}
</style>